﻿<template>

  <div class="app-container">
    <!-- 这是运输任务管理 -->
    <div data-v-c23b2bcc="" class="el-card search-card-box is-never-shadow">

      <div class="el-card__body">

        <!---->
        <el-form :inline="true" :model="parameter" class="demo-form-inline">
          <el-form-item label="任务编号">
            <el-input v-model="parameter.transportationNumber" placeholder="任务编号"></el-input>
          </el-form-item> 
           <el-form-item label="司机姓名">
            <el-input v-model="parameter.driverName" placeholder="司机姓名"></el-input>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select v-model="parameter.transportationTaskState" >
               <el-option label="请选择任务状态" value="0"></el-option>
              <el-option label="代发车" value="3"></el-option>
              <el-option label="在途" value="4"></el-option>
              <el-option label="已到达" value="6"></el-option>
            </el-select>

          </el-form-item>

          <el-form-item>

            <el-button type="danger" @click="findBycondition()">搜索</el-button>
            <el-button @click="resetForm('parameter')">重置</el-button>
          </el-form-item>

        </el-form>

      <!-- ----------------------------------------------------------------------------------------------------- -->

      </div>

    </div>

    <!-- 表格数据展示 -->

    <div>

      <el-table

        class="tableA"

        style="width: 100%"

        align="center"

        v-loading="loading"

        element-loading-text="拼命加载中"

        element-loading-spinner="el-icon-loading"

        :data="ALLtransportation"

      >

        <el-table-column label="序号" prop="transportationId" width="100">

        </el-table-column>

        <el-table-column

          label="运输任务编号"

          prop="transportationNumber"

          width="200"

        >

        </el-table-column>

        <el-table-column

          label="车牌号码"

          prop="transportationLicensePlateNumber"

          width="200"

        >

        </el-table-column>

        <el-table-column

          label="调度机构"

          prop="transportationSchedulingMechanism"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="起始地"

          prop="transportationTheOrigin"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="目的地"

          prop="transportationDestination"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="司机名称"

          prop="transshipmentTmsDriverDetails.driverName"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="运输任务状态"

          prop="transportationTaskState"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="车辆装载状态"

          prop="transportatio nLoadingConditionVehicle"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="计划提货时间"

          prop="transportationChedulePickupTime"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="实际提货时间"

          prop="transportationActualDeliveryTime"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="计划发车时间"

          prop="transportationScheduleDepartureTime"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="实际发车时间"

          prop="transportationActualDepartureTime"

          width="100"

        >

        </el-table-column>

        <el-table-column

          label="异常情况"

          prop="transportationAbnormalSituation"

          width="100"

        >

        </el-table-column>

        <el-table-column label="操作" width="300">

          <template slot-scope="scope">

            <el-button  @click.native="findysrwxq(scope.row)">查看运输任务详情</el-button>

          </template>

        </el-table-column>

      </el-table>

      <el-pagination

        :total="total"

        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

        :current-page.sync="parameter.page"

        :page-sizes="[2, 4, 6, 8]"

        :pager-count="9"

        background

        :page-size.sync="parameter.num"

        layout="total, sizes, prev, pager, next, jumper"

      >

      </el-pagination>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="受捐赠单位" prop="dwid">
            <el-select
              v-model="ruleForm.dwid"
              clearable
              placeholder="受捐助单位"
            >
              <el-option
                v-for="item in options"
                :key="item.dwid"
                :label="item.dwname"
                :value="item.dwid"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="捐赠类型" prop="jztype">
            <template>
              <el-radio v-model="ruleForm.jztype" label="个人">个人</el-radio>
              <el-radio v-model="ruleForm.jztype" label="单位">单位</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="捐赠人" prop="jzperson">
            <el-input v-model="ruleForm.jzperson" class="input"></el-input>
          </el-form-item>
          <el-form-item label="捐赠金额" prop="jzmoney">
            <el-input v-model="ruleForm.jzmoney" class="input"></el-input>
          </el-form-item>
          <el-form-item label="捐赠时间" prop="jzdate">
            <el-date-picker
              v-model="ruleForm.jzdate"
              start-placeholder="请选择捐赠时间"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              style="width: 50%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="jzremark">
            <el-input type="textarea" v-model="ruleForm.jzremark"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存</el-button
            >
            <el-button
              @click="(dialogFormVisible = false), resetForm('ruleForm')"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      //loading加载element-ui提供的加载事件

      loading: true,

      //表格data 循环的数据

      ALLtransportation: [],

      //修改与添加共有整合了一个头部信息

      title: "",

      //分页对应的数据 page num （id，name）对应条件

      parameter: {

        page: 1,

        num: 2,

        transportationNumber: "",

        driverName: "",

        transportationTaskState: "",

      },
      options: [],
      total: 0, 
      dialogFormVisible: false,
      //添加与修改共用的一个数据类

      ruleForm: {

        jzid: null,

        dwid: "",

        jztype: "",

        jzperson: "",

        jzmoney: "",

        jzdate: "",

        jzremark: "",

      },

      //表单判断是否为空

      rules: {

        dwid: [

          { required: true, message: "请选择受捐赠单位", trigger: "blur" },

        ],

        jztype: [{ required: true, message: "请选择类型", trigger: "blur" }],

        jzperson: [{ required: true, message: "输入捐赠人", trigger: "blur" }],

        jzmoney: [{ required: true, message: "输入金额", trigger: "blur" }],

        jzdate: [{ required: true, message: "输入时间", trigger: "blur" }],

        jzremark: [{ required: true, message: "请备注", trigger: "blur" }],

      },

    };

  },

  methods: {

    handleSizeChange() {

      this.load();

    },

    handleCurrentChange() {

      this.load();

    },

    //分页条件查询

    findBycondition() { 

      this.load();

    },

    //add 与 update 给对应数据进行赋值或者清空

    add() {

      this.title = "添加分类";

      this.ruleForm.dwid = "";

      this.ruleForm.jztype = "";

      this.ruleForm.jzperson = "";

      this.ruleForm.jzmoney = "";

      this.ruleForm.jzdate = "";

      this.ruleForm.jzremark = "";

    },

    //跳转运输任务详情页面 路由传值

    findysrwxq(scoperow) {
      console.log(scoperow)
        this.$router.push({path:'/home/View_the_transport_task_details',query:scoperow})
    },
    //删除
    deleteRow(scope, index, allList) {
      let id = scope.jzid;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.post("/api/jzxx/deletejzxx", { id: id }).then((res) => {
            if (res.data > 0) {
              //进行了一遍物理删除数据 （防止与数据库的连接速度过慢进行重复操作）
              allList.splice(index, 1);
              if (allList.length == 0) {
                this.parameter.page += 1;
                this.load();
              }
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //运输任务条件分页load

    load() {

      this.axios.post("/api/transshipment-tms-transportation-task-management/PageBYcondition", this.parameter).then((res) => {

        this.ALLtransportation = res.data.list;

        this.parameter.page = res.data.pageNum;

        this.parameter.num = res.data.pageSize;

        this.total = res.data.total;

          // console.log(res.data.list)

        //加载样式

        setTimeout(() => {

          this.loading = false;

        }, 1000);

      });

     

    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "添加分类") {
            this.axios.post("/api/jzxx/addjzxx", this.ruleForm).then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.dialogFormVisible = false;
                this.load();
              }
            });
          } else {
            this.resetForm.dwid = this.axios
              .post("/api/jzxx/updatejzxx", this.ruleForm)
              .then((res) => {
                if (res.data > 0) {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.dialogFormVisible = false;
                  this.load();
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     
    resetForm() {
      this.parameter = [];
    },
  },

  created() {

    //初始化加载

    this.load();

  },
  // resetForm(formName) {
  //       this.$refs[formName].resetFields();
  //     }
};

</script>

 

<style scoped>

.app-container {

  padding: 20px;

  background-color: #abb7d8;

}

.tableA {

  margin: 10px;

  margin-left: -0.5px;

}

/* .Aaa{

     background: #e5e9f2;

      width: 100%;

      height: 100%;

  } */



.el-col {

  border-radius: 4px;

}

.bg-purple-dark {

  background: #8baaf2;

}

.bg-purple {

  background: #e5e9f2;

}

.bg-purple-light {

  background: #e5e9f2;

}

.grid-content {

  border-radius: 4px;

  min-height: 36px;

}

.row-bg {

  padding: 10px 0;

  background-color: #f9fafc;

}

</style>